import styles from './Header.scss';
import { useLocation } from 'umi';
import { NavLink } from 'umi';

interface IHead {
  title: string;
}

const routeArr = [
  {
    to: '/',
    name: 'Go to home page',
  },
  {
    to: '/users/list',
    name: 'Go to userList page',
  },
  {
    to: '/users/1',
    name: 'Go to userid page',
  },
];

export default function Header(props: IHead) {
  const location = useLocation();
  return (
    <>
      <h1 className={styles.title}>{props.title + '-' + (location.key || '')}</h1>
      <div className={styles.link}>
        {
          routeArr.map((route, index) => {
            return <>
              <NavLink exact to={route.to} activeClassName={styles.selected} key={route.to}>{route.name}</NavLink>
              {
                index !== routeArr.length - 1 && <i> | </i>
              }
            </>;
          })
        }
      </div>
    </>
  );
}
